<template>
  <!--  面包屑导航-->
  <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!--  卡片区域-->
  <el-card>
    <!--    搜索框区域，添加商品按钮-->
    <el-row :gutter="8">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="goodsParams.query" clearable @clear="getGoodsList">
          <template #append>
            <el-button class="iconfont icon-fenxiang" @click="getGoodsList"></el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addGoods">添加商品</el-button>
      </el-col>
    </el-row>
    <!--    商品列表区域-->
    <el-table :data="goodsList" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="goods_name" label="商品名称"></el-table-column>
      <el-table-column prop="goods_price" label="商品价格(元)" width="100px"></el-table-column>
      <el-table-column prop="goods_weight" label="商品重量" width="100px"></el-table-column>
      <el-table-column prop="add_time" label="创建时间" width="150px">
        <template v-slot="scope">
          {{dateFormat(scope.row.add_time)}}
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="130px">
          <template v-slot="scope">
            <el-button type="primary" class="iconfont icon-edit"></el-button>
            <el-button type="danger" class="iconfont icon-delete" @click="removeGoodsById(scope.row.goods_id)"></el-button>
          </template>
      </el-table-column>
    </el-table>
    <!--    商品列表分页区域-->
    <el-pagination
        v-model:currentPage="goodsParams.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="goodsParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goodsTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>

</template>

<script setup lang="ts">
import {IGoodsListInfo} from "@/util/interface";
import {DeleteGoodsById, GetGoodsList} from "@/api";
import {reactive, ref} from "vue";
import {dateFormat} from "@/filters/filters";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
// 商品列表查询参数
const goodsParams = reactive<IGoodsListInfo>({
  query: '',
  pagenum: 1,
  pagesize: 10,
})
// 商品列表总数
const goodsTotal = ref<number>(0)
// 商品列表
const goodsList = ref([])
const getGoodsList = async ()=>{
  const {data: res} = await GetGoodsList(goodsParams)
  if(res.meta.status !== 200){return ElMessage.error('获取商品列表数据失败')}
  // console.log(res)
  goodsList.value = res.data.goods
  goodsTotal.value = res.data.total
}
getGoodsList()
// 删除商品
const removeGoodsById = (id: number)=>{
  ElMessageBox.confirm(
      '将永久删除该商品， 是否继续?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        const {data: res} = await DeleteGoodsById(id)
        console.log(res)
        if(res.meta.status !== 200){return ElMessage.error('删除失败!')}
        getGoodsList()
      })
      .catch(() => {
        ElMessage.error('取消删除!')
      })
}
// 添加商品
const router = useRouter()
const addGoods = ()=>{
  router.push('/goods/add')
}

// 编辑商品

// 商品分页
const handleSizeChange = (newSize: number) => {
  goodsParams.pagesize = newSize
  getGoodsList()
}
const handleCurrentChange = (newCurrentPageNum: number) => {
  goodsParams.pagenum = newCurrentPageNum
  getGoodsList()
}
</script>

<style lang="less" scoped>

</style>